<template>
  <div class="film-list">
    <ul>
      <router-link
        tag="li"
        :to="{path: '/films/'+item.filmId}"
        v-for="(item,index) in films"
        :key="index"
      >
        <div class="list-left">
          <img :src="item.poster">
        </div>
        <div class="list-right">
          <div class="film-info">
            <h5>
              {{item.name}}
              <span class="filmType">{{item.filmType.name}}</span>
            </h5>
            <div class="score font13 color797d82">
              <div v-if="item.grade">观众评分：
                <span class="colorffb232">{{item.grade}}</span>
              </div>
            </div>
            <p class="actor font13 color797d82">{{actors(item.actors)}}</p>
            <div class="areaAndTime font13 color797d82">{{item.nation}}</div>
          </div>
          <div class="ticket" @click.stop="addFilm(item)">购票</div>
        </div>
      </router-link>
    </ul>
    <div class="load-more" @click="loadMore">{{more}}</div>
  </div>
</template>

<script>
/* eslint-disable */
import {Indicator} from 'mint-ui'
import axios from 'axios'
import {mapMutations} from 'vuex'
import { Loading } from 'element-ui'
export default {  
  name: 'nowPlaying',
    data () {
      return {
        'films': [],
        'page': 1,
        'pageSize': 5,
        'totalPage': 0,
        'more': '加载更多',
        'test': null
      }
    },
    created () {
    this.getFilms()
    },
    computed: {
        // ...mapState([
        //     'userFilms'
        // ]),
        // ...mapGetters([
        //     'userFilms'
        // ])
    },
    methods: {   
     /**
     * 获取影片数据
     */
    getFilms (filmType,page,pageSize) {
      Indicator.open({
           text: '加载中...',
           spinnerType: 'fading-circle'
         });
      axios.get('/film/list',{
          params: {
              filmType: filmType||1,
              page: page||this.page,
              pageSize: pageSize||this.pageSize
          }
      }).then((res) => {
          console.log(res)
          if(res.data.status == 0){
             Indicator.close()
             let data = res.data.data.films
             this.films.push(...data)
             this.totalPage = Math.ceil(parseInt(res.data.totalSize)/this.pageSize);
          }else{
              alert('网络情况不佳，请稍后重试')
          }
      })
    },
    /**
     * 处理响应信息中的演员表
     */
    actors (item) {
      return item.map((item) => {
        return item.name
      }).join(' ')
    },
    /**
     * 加载更多
     */
    loadMore () {
        console.log(this.totalPage);
       if(this.page < this.totalPage){
         this.page ++;
         this.getFilms(1,this.page,5);
       }else{
           this.more = '没有更多啦'
       }
    },
    ...mapMutations({
        addFilm: 'addFilm'
    }),
   }
};
</script>

<style lang="scss">
@import 'mint-ui/lib/style.css';
@import '@/styles/common/px2rem.scss';
.film-list {
    .load-more {
        text-align: center;
        font-size: px2rem(12);
    }
}
.mint-indicator-text{
  font-size: px2rem(16);
}
</style>
